@import '@/styles/token';

// 组件特有的变量定义（如果全局没有对应变量）
@smart-variable-popover-width: 200px;
@smart-variable-popover-height: 300px;
@smart-variable-editor-min-height: 100px;
@smart-variable-highlight-bg: #e6f7ff;
@smart-variable-highlight-border: #91d5ff;

// 动画相关变量
@smart-variable-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@smart-variable-transition-fast: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

// 备用变量定义（当全局变量不存在时使用）
@smart-variable-item-hover-bg: #f5f5f5;
@smart-variable-text-placeholder: #bfbfbf;
@smart-variable-text-color: rgba(0, 0, 0, 0.85);
@smart-variable-component-bg: #fff;

.highlight-var {
  background-color: @smart-variable-highlight-bg;
  border-radius: 2px;
  padding: 0 2px;
  font-family: monospace;
}

.smart-variable-input {
  position: relative;

  .editor {
    border: 1px solid @colorBorder;
    border-radius: @borderRadius;
    min-height: @smart-variable-editor-min-height;
    padding: @paddingSm;
    outline: none;
    font-size: @fontSize;
    line-height: 1.5;
    color: @smart-variable-text-color;
    background-color: @smart-variable-component-bg;
    transition: @smart-variable-transition;

    &:hover {
      border-color: @colorPrimaryHover;
    }

    &:focus {
      border-color: @colorPrimaryHover;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 20%);
    }

    &[contenteditable='true']:empty::before {
      content: attr(data-placeholder);
      color: @smart-variable-text-placeholder;
      pointer-events: none;
    }
  }

  .placeholder {
    position: absolute;
    top: @paddingSm;
    left: @paddingSm;
    color: @smart-variable-text-placeholder;
    pointer-events: none;
    user-select: none;
    font-size: @fontSize;
    padding-top: 1px;
    padding-left: 1px;
    line-height: 1.5;
  }

  .popover {
    position: fixed;
    z-index: 1000;
    background: @smart-variable-component-bg;
    border: 1px solid @colorBorder;
    border-radius: @borderRadius;
    box-shadow: @boxShadow;
    padding: @paddingSm;
    width: @smart-variable-popover-width;
    height: @smart-variable-popover-height;
    overflow: hidden;

    .ant-tree {
      width: 100%;
      height: 100%;
      overflow: auto;

      .ant-tree-node-content-wrapper {
        transition: @smart-variable-transition-fast;

        &:hover {
          background-color: @smart-variable-item-hover-bg;
        }

        &.ant-tree-node-selected {
          background-color: @smart-variable-highlight-bg;
        }
      }

      .ant-tree-title {
        font-size: @fontSizeSm;
        color: @smart-variable-text-color;
      }

      .ant-tree-switcher {
        width: @paddingLg;
        height: @paddingLg;
        line-height: @paddingLg;
      }

      .ant-tree-indent-unit {
        width: @paddingLg;
      }
    }
  }

  // 变量高亮样式
  .variable-highlight {
    background-color: @smart-variable-highlight-bg;
    border: 1px solid @smart-variable-highlight-border;
    border-radius: 3px;
    padding: 1px 3px;
    color: @colorPrimary;
    font-weight: @fontWeightStrong;
  }
}

// 全局样式覆盖
.smart-variable-popover {
  .ant-tree-node-content-wrapper {
    transition: @smart-variable-transition-fast;

    &:hover {
      background-color: @smart-variable-item-hover-bg;
    }
  }

  .ant-tree-node-selected {
    .ant-tree-node-content-wrapper {
      background-color: @smart-variable-highlight-bg !important;
    }
  }
}
